<template>
  <div class="business business-app">
    <div class="panel-search-top">
      <div class="form">
        <el-form ref="form" :inline="true" label-width="0px" size="mini">
          <el-form-item>
            <el-input placeholder="请输入查询内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="button-group-operate">
        <el-button icon="el-icon-new" @click="handleAdd() ">新增</el-button>
        <el-button icon="el-icon-editor" @click="handleAdd(1)">编辑</el-button>
        <el-button icon="el-icon-delete" @click="dialogDelete=true">删除</el-button>
        <el-button icon="el-icon-import" @click="dialogInport=true">导入</el-button>
        <el-button icon="el-icon-export" @click="dialogExport=true">导出</el-button>
      </div>
    </div>

    <div class="pagecontent">
      <div class="panel">
        <div class="panel-con">
          <el-table :data="json.portraitC1">
            <el-table-column prop="c1" label="序号"></el-table-column>
            <el-table-column prop="c2" label="业务系统名称"></el-table-column>
            <el-table-column prop="c3" label="应用组件名称"></el-table-column>
            <el-table-column prop="c1" label="类型"></el-table-column>
            <el-table-column prop="c2" label="IP端口"></el-table-column>
            <el-table-column prop="c3" label="备注"></el-table-column>
            <el-table-column prop="c4" label="操作">
              <template slot-scope="scope">
                <a class="table-edit" @click="handleAdd(1)"></a>
                <a class="table-delete" @click="dialogDelete=true" href="#"></a>
              </template>
            </el-table-column>
          </el-table>
          <div class="compage">
            <el-pagination background layout="  prev, pager, next, jumper" :total="1000"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :title="`${dialogAddTitle}应用组件`" width="650px" :visible.sync="dialogAdd">
      <el-form ref="form" label-width="130px" label-position="right" size="mini">
        <el-form-item label="应用名称">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
          <a href="#" class="help"></a>
        </el-form-item>
        <el-form-item label="子类型">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
          <div class="inputdesc">*WEB应用、中间件、数据库、DNS、FTP、或用户自定义名称</div>
        </el-form-item>
        <el-form-item label="所属组件">
          <el-select placeholder="请选择">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-row class="rowserver" v-for="(value,index) in addForm.ip">
          <el-col :span="12">
            <el-form-item label="服务器IP">
              <a class="deleteip" @click="deleteIp(index)"></a>
              <el-input></el-input>

              <div class="inputdesc">*支持多个IP</div>
              <!-- <a class="add" @click="addIp('ip')">增加服务器IP</a> -->
            </el-form-item>

          </el-col>
          <el-col :span="12">

            <el-form-item class="port" label="端口">
              <div v-for="(value2,index2) in value.port">
                <el-input></el-input>-
                <el-input></el-input>
                <a class="deletehhh" @click="deletePort(index,index2)"></a>
              </div>

              <div class="inputdesc">*支持多个端口</div>
              <a class="add" @click="addPort('port',index)">增加端口</a>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">

            <el-form-item label="">
              <a class="add" @click="addIp('ip')">增加服务器IP</a>
            </el-form-item>

          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>

        <el-form-item label-width="0px" class="buttonlist" style="text-align:Center">
          <el-button @click="dialogAddSubmit" type="primary">确定</el-button>
          <el-button @click="dialogAdd = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="请选择导入文件" width="650px" :visible.sync="dialogInport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="文件">
          <el-select placeholder="请选择文件">
            <el-option label="选择1" value="1"></el-option>
            <el-option label="选择2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogInport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="请先命名导出文件" width="650px" :visible.sync="dialogExport">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="名称">
          <el-input v-model="dialogAddForm.name"></el-input>
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogExport = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogDelete">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否删除当前所选数据
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogDelete = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="提示" width="650px" :visible.sync="dialogSave">
      <el-form ref="form" label-width="230px" label-position="right" size="mini">
        <el-form-item label="">
          是否保存当前页面
        </el-form-item>
        <el-form-item class="buttonlist">
          <el-button type="primary">确定</el-button>
          <el-button @click="dialogSave = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Data from "../data/index";

export default {
  name: "businessPortrait",
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc: ""
      },
      dialogAdd: false,
      dialogAddTitle: "创建",
      dialogDelete: false,
      dialogSave: false,
      dialogInport: false,
      dialogExport: false,
      json: {
        portraitC1: Data.portraitC1
      },
      addForm: {
        ip: [{ value: "", port: [{ p1: "", p2: "" }] }]
      }
    };
  },
  components: {},
  methods: {
    addIp() {
      this.addForm.ip.push({ value: "", port: [{ p1: "", p2: "" }] });
    },
    addPort(key, index) {
      this.addForm.ip[index].port.push({ p1: "", p2: "" });
    },
    deleteIp(index) {
      this.addForm.ip.splice(index, 1);
    },
    deletePort(index, index2) {
      this.addForm.ip[index].port.splice(index2, 1);
    },
    dialogAddSubmit() {
      if (
        this.dialogAddForm.name.length < 3 ||
        this.dialogAddForm.name.length > 10
      ) {
        alert(
          "长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符"
        );
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
      if (!reg.test(this.dialogAddForm.ip)) {
        alert(
          "只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255"
        );
        return false;
      }
      if (this.dialogAddForm.desc > 30) {
        alert("备注信息最大不超30个中文字符");
        return;
      }
    },
    handleAdd(type) {
      this.dialogAdd = true;
      if (type == 1) {
        this.dialogAddTitle = "编辑";
      }
    }
  }
};
</script>

<style lang="scss" >
@import url(../assets/css/base.css);
.deleteip{
  position: absolute;
  top:0px;
 left: -90px;
 width: 20px;
 height:30px;
 background: url(../assets/shouqi-5.png) no-repeat center center;
 background-size: 20px 20px;

}
.deletehhh{
  display: inline-block;
   width: 20px;
 height:20px;
 margin-left:5px;
 vertical-align: middle;
 background: url(../assets/shouqi-5.png) no-repeat center center;
 background-size: 20px 20px;
}
 
.el-dialog__body .el-input--mini {
  width: 206px !important;
}
.business-app {
  .el-dialog__body .port .el-input--mini {
    width: 50px !important;
    .el-input__inner{
  width: 100%;
    }
  }
}
.business-app {
  margin-top: 10px;
  a.add {
    color: rgba(63, 134, 255, 1);
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    &::before {
      content: "";
      width: 16px;
      height: 16px;
      background: url(../assets/add_icon.png) no-repeat center center;
      position: absolute;
      left: 0px;
      top: 3px;
    }
  }
}
</style>
 
<style scoped lang="scss">
.parallel-wrap {
  margin-top: 10px;
}

.button-group-operate {
  float: right;
}
.form {
  float: left;
}
.appright {
  background: #fff;
}
.pagecontent {
  padding: 20px;
}
.inputdesc {
  color: rgba(155, 155, 155, 1);
}
</style>
